<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="user/_fragment :: head(~{::title})">
    <title>博客管理后台</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">

<!--头部导航-->
<nav th:replace="user/_fragment :: left-menu"></nav>
<!----------------------------------------------------------------------------------------->

<!-- 内容区域 -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            个人信息
            <small>weblog</small>
        </h1>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <!-- right column -->
            <div class="col-md-12">
                <!-- Horizontal Form -->
                <div class="box box-info">
                    <form class="form-horizontal" th:action="@{/user/update}" method="post">

                        <div class="box-body">
                            <div class="form-group image" align="center">
                                <img style="height: 14%;width: 14%" src="../../static/img/default-head.jpg" class="img-circle" alt="User Image">
                            </div>
                            <!-- forbidden -->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">ID</label>
                                <div class="col-sm-10">
                                    <input type="text" id="userId" class="form-control" th:value="${session.user.userId}" disabled="disabled">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="username" class="col-sm-2 control-label">昵称</label>
                                <div class="col-sm-10">
                                    <input id="username" type="text" name="username" class="form-control" th:value="${session.user.username}">
                                </div>
                            </div>

                            <!-- select -->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10">
                                    <select class="form-control" disabled="disabled">
                                        <option th:text="${session.user.sex}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-10">
                                    <input type="text" id="email" name="email" class="form-control" th:value="${session.user.email}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">注册时间</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" th:value="${session.user.joinDate}" disabled="disabled">
                                </div>
                            </div>
                            <!-- forbidden -->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">当前状态</label>
                                <div class="col-sm-10">
                                    <!--th:text="${session.user.status}==1?'Online':'Deleted'" th:placeholder="${session.user.status}" -->
                                    <input type="text" class="form-control" value="Online" disabled="disabled">
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <p id="errorMessage" th:text="${updateMsg}" style="color: darkred"></p>
                            <!--<button type="reset" class="btn btn-default" style="margin-left: 1px">重置</button>-->
                            <button id="submit" type="submit" class="btn btn-info pull-right">提交修改</button>
                        </div>
                        <!-- /.box-footer -->
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- 内容区域 /-->



<!----------------------------------------------------------------------------------------->
<!--底部footer-->
<footer th:replace="user/_fragment :: footer"></footer>
</body>

<th:block th:replace="user/_fragment :: script">
</th:block>

<script>
    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }
    $(document).ready(function() {
        // 激活导航位置
        setSidebarActive("personal");
    });
    //避免空数据
    $(function () {
        $("#username").blur(function () {
            if (!$(this).val()) {
                $("#errorMessage").html("用户名不能为空");
                $("#submit").attr("disabled", true);
            } else {
                $("#email").blur(function () {
                    var email = $(this).val();
                    var text = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                    if (email == null || email == "") {
                        $("#errorMessage").html("邮箱不能为空");
                        $("#submit").attr("disabled", true);
                    } else if (!text.test(email)) {
                        $("#errorMessage").html("邮箱输入格式错误");
                        $("#submit").attr("disabled", true);
                    } else {
                        $("#submit").attr("disabled", false);
                        $("#errorMessage").html("");
                    }
                })
            }
        });
    });
</script>

</html>
